﻿@page "/CarouselTest1"
@using Havit.Blazor.Components.Web
@using Havit.Blazor.Components.Web.Bootstrap

@* <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link href="_content/Havit.Blazor.Components.Web.Bootstrap/defaults.css" rel="stylesheet" />
<link href="_content/Havit.Blazor.Components.Web.Bootstrap/bootstrap.css" rel="stylesheet" /> *@

@if (Images.Count > 0)
{
   <Havit.Blazor.Components.Web.Bootstrap.HxCarousel Controls="true">

        @foreach (var image in Images)
        {
            <Havit.Blazor.Components.Web.Bootstrap.HxCarouselItem Active="true">
                <img src=@image />
            </Havit.Blazor.Components.Web.Bootstrap.HxCarouselItem>
        }
    </Havit.Blazor.Components.Web.Bootstrap.HxCarousel>
}


<Button Text="Add Image" OnClick="AddImageClick" />


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

@code {
    public List<string> Images { get; set; } = new List<string>();


    protected override Task OnAfterRenderAsync(bool firstRender)
    {
        return base.OnAfterRenderAsync(firstRender);
    }

    private async Task AddImageClick()
    {
        Images = new List<string>
        {
            "./images/7b056041e81942aac012dd9b68ba104a.jpeg",
            "./images/6162f127bcad72e7309465ab688d13a5.jpeg"
        };
    }
}
